<template>
  <div class="wrapper">
    <div :class="isShowNav ? 'content' : 'contentTwo'">
      <router-view></router-view>
    </div>
    <footer v-show="isShowNav">
      <ul>
        <li
          :class="navRouterWeb === 'home' ? 'active' : ''"
          @click="goPage('home')"
        >
          <a-icon type="home" /><br />
          <span>首页</span>
        </li>
        <li
          :class="navRouterWeb === 'message' ? 'active' : ''"
          @click="goPage('message', true)"
        >
          <a-icon type="message" /><br />
          <span>消息</span>
        </li>
        <li
          :class="navRouterWeb === 'person' ? 'active' : ''"
          @click="goPage('person', true)"
        >
          <a-icon type="user" /><br />
          <span>我的</span>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    goPage(routerName, isNeedValidate) {
      if (isNeedValidate) {
        if (this.checkStatus !== "5") {
          this.$message.warning(
            "您的企业信息尚未审核成功，待审核成功开启该权限"
          );
          return false;
        }
      }
      this.$router.push({ name: routerName });
    }
  },
  computed: {
    navRouterWeb() {
      return this.$store.state.navRouterWeb;
    },
    isShowNav() {
      return this.$store.state.isShowNav;
    },
    checkStatus() {
      return this.$store.state.checkStatus;
    }
  }
};
</script>

<style scoped lang="less">
.content {
  height: calc(100% - 60px);
  overflow: auto;
}
.contentTwo {
  height: 100%;
  overflow: auto;
}
.wrapper {
  height: 100%;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  border-top: 1px solid @border-color-base;
  ul {
    .flex_content();
    font-size: 14px;
    li {
      .flex_one();
      text-align: center;
      color: #333333;
      .anticon {
        font-size: 20px;
      }
      span {
        display: inline-block;
        margin-top: 5px;
      }
    }
    .active {
      color: @primary-color;
    }
  }
}
</style>
